<template>
	<div class="store-detail-technician-list">
		<div class="top">
			<goback></goback>技师列表
		</div>
		<ul>
			<li>
				<div class="pic-content">
					<img src="../../assets/images/technician-pic.png">
					<div>
						4.2分
					</div>
				</div>
				<div class="txt">
					<div>张师傅</div>
					<div>值班长</div>
				</div>
			</li>
			<li>
				<div class="pic-content">
					<img src="../../assets/images/technician-pic.png">
					<div>
						4.2分
					</div>
				</div>
				<div class="txt">
					<div>张师傅</div>
					<div>值班长</div>
				</div>
			</li>
			<li>
				<div class="pic-content">
					<img src="../../assets/images/technician-pic.png">
					<div>
						4.2分
					</div>
				</div>
				<div class="txt">
					<div>张师傅</div>
					<div>值班长</div>
				</div>
			</li>
			<li>
				<div class="pic-content">
					<img src="../../assets/images/technician-pic.png">
					<div>
						4.2分
					</div>
				</div>
				<div class="txt">
					<div>张师傅</div>
					<div>值班长</div>
				</div>
			</li>
			<li>
				<div class="pic-content">
					<img src="../../assets/images/technician-pic.png">
					<div>
						4.2分
					</div>
				</div>
				<div class="txt">
					<div>张师傅</div>
					<div>值班长</div>
				</div>
			</li>

		</ul>
	</div>

</template>
<script type="text/javascript">
	import goback from '../common/goback';
	export default {
		components: {
				goback
			}
	}
</script>
<style lang="scss" >
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	body{
		background: #fff!important;
		
	}
	.store-detail-technician-list {
		.top{
			width: rem(375);
			height: rem(46);
			position: relative;
			text-align: center;
			line-height: rem(46);
			font-size:rem(17);
			color:#030303;
			text-align:center;
			background:rgba(250,250,250,0.90);
			.goback{
				background: none;
				color: #666;
			}
		}
		ul {
			padding: rem(28) rem(12)  0 rem(12);
			li {
				float:left;
				margin-right: rem(36);
				margin-bottom: rem(28);
				.pic-content {
					width: 98px;
					height: 98px;
					border-radius: 100%;
					position: relative;
					overflow: hidden;
					img {
						width: 98px;
						height: 98px;
						border-radius: 100%;
					}
					div {
						font-size: 11px;
						color: #ffffff;
						text-align: center;
						background: $blue;
						position: absolute;
						height: rem(13);
						line-height: rem(13);
						width: rem(98);
						bottom: rem(0);
					}
				}
				.txt{
					text-align: center;
					div:nth-of-type(1){
						color: #333;
						font-size: rem(14);
						line-height: rem(14);
						margin-top: rem(5);
					}
					div:nth-of-type(2){
						color: #999;
						font-size: rem(12);
						line-height: rem(12);
						margin-top: rem(5);
					}
				}
			}
			li:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	
</style>